<template>
  <div class="px-[38px] text-[16px]">
    <div class="text-[28px] mt-[46px] font-bold w-full flex justify-center">
      <img :src="getAssetsFile('logo1.png')" class="w-[80px] h-[70px]" alt="" />
    </div>
    <div class="mt-[44px] text-[20px] font-bold">账号登录</div>
    <div>
      <van-form @submit="submit">
        <van-cell-group inset>
          <van-field
            label-align="top"
            v-model="info.mobile"
            name="手机号"
            label="手机号"
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="info.password"
            label-align="top"
            type="password"
            name="登录密码"
            label="登录密码"
            placeholder="请输入登录密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div class="text-[14px] mt-[10px]">
          <van-checkbox v-model="checked" shape="square" checked-color="#F3A140"
            >记住密码</van-checkbox
          >
        </div>
        <div class="mt-[30px]">
          <van-button round block type="primary" native-type="submit" color="#F3A140">
            <span class="text-[17px]">立即登录</span>
          </van-button>
        </div>
      </van-form>
      <!-- <div class="mt-[15px] text-[#EF6800] text-[14px]">忘记密码</div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { login, autoLogin, checkLogin } from "@/utils/api";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import getAssetsFile from "@/utils/getImageurl";
import Cookies from "js-cookie";
interface Info {
  mobile: string;
  password: string;
}

const info = reactive<Info>({
  mobile: "",
  password: "",
});
const route = useRoute();
const router = useRouter();
const checked = ref<boolean>(false);

//验证登录
const getLogin = async () => {
  const res = await checkLogin("");
  if (res.code) {
    router.push("/h5/home");
  }
};
getLogin();
//自动登录
const getUserId = async () => {
  if (route.query.user_id) {
    const res = await autoLogin({ user_id: route.query.user_id });
    if (res.code == 1) {
      window.location.href = "/h5/detail?id=" + route.query.id;
    }
  }
};
getUserId();
const getId = () => {
  if (route.query.id) {
    window.location.href = "/h5/detail?id=" + route.query.id;
  } else {
    window.location.href = "/h5/home";
  }
};
//获取cookie的手机号和密码
const getInfo = () => {
  info.mobile = Cookies.get("mobile") as string;
  info.password = Cookies.get("password") as string;
};
getInfo();
//验证通过
const submit = async () => {
  const res = await login(info);
  if (res.code == 1) {
    getId();
    if (checked.value) {
      Cookies.remove("mobile");
      Cookies.remove("password");
      Cookies.set("mobile", info.mobile);
      Cookies.set("password", info.password);
    }
  }
  showToast(res.msg);
};
</script>
<style scoped lang="scss">
:deep(.van-cell-group--inset) {
  margin: 0 !important;
}
:deep(.van-cell) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:deep(.van-checkbox__icon .van-icon) {
  border: 1px solid #ef6800;
  border-radius: 3px;
}
</style>
